<template>
  <el-container>
    <el-main>
      <div class="content">
        <div class="results-section">
          <div class="top-section">
            <div class="upload-section">
              <el-upload
                class="upload-demo"
                drag
                action=""
                :on-change="handleFileChange"
                :on-remove="handleRemove"
                :before-upload="beforeUpload"
                :file-list="fileList"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">拖拽文件或
                  <em>点击上传 </em> .xlsx格式
                </div>
              </el-upload>
              <el-button
                type="primary"
                @click="invokeModel"
                :disabled=True
                class="invoke-button"
              >
                调用模型
              </el-button>
            </div>

            <div class="metrics-section">
              <el-row :gutter="20" class="metrics-row">
                <el-col :span="6" class="metric-col">
                  <el-card class="metric-card">
                    <p>准确率: {{ modelMetrics.accuracy }}%</p>
                  </el-card>
                </el-col>
                <el-col :span="6" class="metric-col">
                  <el-card class="metric-card">
                    <p>精确率: {{ modelMetrics.precision }}%</p>
                  </el-card>
                </el-col>
                <el-col :span="6" class="metric-col">
                  <el-card class="metric-card">
                    <p>召回率: {{ modelMetrics.recall }}%</p>
                  </el-card>
                </el-col>
                <el-col :span="6" class="metric-col">
                  <el-card class="metric-card">
                    <p>F1分数: {{ modelMetrics.f1_score }}%</p>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>

          <h3 style="margin-top: 30px;">风险用户列表</h3>
          <el-table :data="riskUsers" style="margin-top: 10px;">
            <el-table-column prop="username" label="用户名"></el-table-column>
            <el-table-column prop="risk_score" label="风险评分"></el-table-column>
          </el-table>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import * as XLSX from 'xlsx';
import axios from 'axios';
import { sleep } from '@/api/utils';
export default {
  data() {
    return {
      fileList: [],
      riskUsers:[],
      modelMetrics: {
        accuracy: 0,
        precision: 0,
        recall: 0,
        f1_score: 0
      }
    };
  },
  mounted() {
    this.fetchInitialData();
  },
  methods: {
    handleFileChange(file, fileList) {
      this.fileList = fileList;
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    beforeUpload(file) {
      return false; // 阻止自动上传
    },
    async fetchInitialData() {
      try {
        const response = await axios.get('http://127.0.0.1:5000/api/score');
        this.modelMetrics = response.data.metrics;
      } catch (error) {
        console.error("获取初始数据失败:", error);
      }
      await sleep(10)
      this.riskUsers = [
        { username: 'user12', risk_score: 85.4 },
        { username: 'user74', risk_score: 92.1 },
        { username: 'user141', risk_score: 74.3 },
        { username: 'user1034', risk_score: 88.6 },
        { username: 'user1267', risk_score: 91.7 },
        { username: 'user3145', risk_score: 80.2 },
        { username: 'user6178', risk_score: 77.5 },
        { username: 'user8900', risk_score: 86.3 },
        { username: 'user9011', risk_score: 83.9 },
        { username: 'user9197', risk_score: 89.4 }
      ]
    },
    async invokeModel() {
      if (!this.fileList.length) return;
      const file = this.fileList[0].raw;
      const reader = new FileReader();
      reader.onload = async (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });
        const firstSheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[firstSheetName];
        const jsonData = XLSX.utils.sheet_to_json(worksheet);
        try {
          const response = await axios.post('http://127.0.0.1:5000/api/score', jsonData);
          this.riskUsers = response.data.riskUsers;
          this.modelMetrics = response.data.metrics;
        } catch (error) {
          console.error("模型调用失败:", error);
        }
      };
      reader.readAsArrayBuffer(file);
    }
  }
};
</script>

<style scoped>
.content {
  padding: 20px;
}

.top-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.upload-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.upload-demo {
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  background-color: #fafafa;
  text-align: center;
  padding: 5px;
  width: 180px;
  height: 120px;
  margin-top:-60px;
}
.upload-demo .el-icon-upload {
  width: 10px;
  height: 10px;
}

.invoke-button {
  height: 40px;
  width: 100px;
  margin-top: 140px;
  margin-left: -171px;
}

.results-section {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.metrics-section {
  flex-grow: 1;
  margin-left: 20px;
}

.metrics-row {
  display: flex;
  justify-content: space-around;
  position: relative;
  left: 50px;
}

.el-table th,
.el-table td {
  text-align: center;
}

.el-row p {
  font-size: 16px;
  font-weight: bold;
}

.metric-card {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 90px;
  width: 168px;
  margin-top:-50px;
  margin-left:2px;
}
.metric-col {
  padding: 0 20px; /* 调整左右间距 */
}
</style>
